<template>
  <div  class="app-home__header">
    <van-image
      width="0.3rem"
      height="0.3rem"
      lazy-load
      src="https://m.mi.com/static/img/icon-header-logo3.ddf2a1c313.png"
    />
    <!-- <van-search @focus="$router.push({ name: 'search' })" placeholder="请输入搜索关键词" slot="title" /> -->
    <van-search
      @click="$router.push({ name: 'search' })"
      placeholder="搜索商品名称"
      slot="title"
    />
    <van-image
      v-if="!isLogined"
      @click="$router.push({ name: 'login' })"
      width="0.3rem"
      height="0.3rem"
      lazy-load
      src="https://m.mi.com/static/img/icon-user.23496a0116.png">
      <router-link class="link" to="/mine">个人中心</router-link>
      </van-image>
  </div>
</template>
<script>
import Vue from 'vue'
import { Search, NavBar, Image as VanImage, Lazyload } from 'vant'
import { mapGetters } from 'vuex'

Vue.use(VanImage)
Vue.use(NavBar)
Vue.use(Search)
Vue.use(Lazyload)
export default {
  name: 'AppHomeHeader',
  computed: mapGetters('user', ['isLogined'])
}
</script>
<style lang="scss" scoped>
.app-home__header {
display: flex;
justify-content: space-evenly;
  .van-search {
    padding: 0rem;
    color: rgb(255, 255, 255);
  }
  .van-image:nth-child(1){
    margin-left: 0.12rem;
  }
  .van-image:nth-child(2){
    padding-right: 0.2rem;
  }
}
</style>
